<!doctype html>
<html lang="en">
<head>
    <title>Grid - Editing</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides editing" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css"/>
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $element = $("#demo").wijgrid(
            {
                allowEditing: true,
                allowKeyboardNavigation: true,
                showRowHeader: true,
                selectionMode: "none",
                aftercellupdate: onAfterCellUpdate,
                invalidcellvalue: onInvalidCellValue,
                aftercelledit: onAfterCellEdit,
                columns: [
                    { /*readOnly: true*/ },
                    { dataType: "currency", valueRequired: true },
                    { dataType: "number" },
                    { dataType: "number", dataFormatString: "p0" },
                    { dataType: "boolean" }
                ]
            });

            $("#log").html(dump($element.wijgrid("data"))); 
        });

        function onAfterCellUpdate(e, args) {
            $("#log").html(dump($("#demo").wijgrid("data")));
        }

        function onInvalidCellValue(e, args) {
            $(args.cell.tableCell())
                .removeClass("ui-state-active")
                .addClass("ui-state-error");
        }

        function onAfterCellEdit(e, args) {
            $(args.cell.tableCell())
                .addClass("ui-state-active")
                .removeClass("ui-state-error");
        }

        function dump(d2array) {
        	
            var str = "<table class=\"ui-widget ui-widget-content\" rules=\"all\">";
            str += "<caption class=\"ui-widget-header\">dump</caption>";

            for (var i = 0, rowLen = d2array.length; i < rowLen; i++) {
                var row = d2array[i];
                str += "<tr>";

                for (var j = 0, cellLen = row.length; j < cellLen; j++) {
                    str += "<td>" + row[j] + "</td>";
                }

                str + "</tr>";
            }

            return str + "</table>";
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Editing</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->

            <table id="demo">
                <thead>
                    <tr>
                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
                    </tr>
                </tbody>
            </table>

            <div id="log">
            </div>
                
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
